<template>
  <view class="navTop">
    <van-nav-bar
      title="交易中心"
      left-arrow
      fixed
      :border="false"
      class="orderNav"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template slot="right">
        匹配大厅
        <van-icon name="question-o" />
      </template>
    </van-nav-bar>

    <van-tabs
      animated
      swipeable
      sticky
      :border="false"
      :active="active"
      @change="onChange"
      z-index="80"
      :custom-class="tabsClass?'cs1':'cs2'"
    >
      <van-tab title="买入">
        <div class="tabsBox">
          <div class="by">
            <van-row gutter="20">
              <van-col span="12">
                <van-row>买入积分</van-row>
                <van-row>
                  <input type="text" placeholder="请输入买入数量" />
                </van-row>
                <van-row>
                  单笔最大限额
                  <span>1000</span>积分
                </van-row>
              </van-col>
              <van-col span="12">
                <van-row>当前价格</van-row>
                <van-row>
                  <div>
                    <input type="text" value="1.00" />
                    <span>元</span>
                  </div>
                </van-row>
                <van-row></van-row>
              </van-col>
            </van-row>

            <van-row gutter="20">
              <van-col span="12">
                <van-row>可用积分</van-row>
                <van-row>
                  <input type="text" value="1543" readonly />
                </van-row>
                <van-row>
                  当日剩余可买
                  <span>1000</span>积分
                </van-row>
              </van-col>
              <van-col span="12">
                <van-row>交易总额</van-row>
                <van-row>
                  <div>
                    <input type="text" value="1.00" />
                    <span>元</span>
                  </div>
                </van-row>
                <van-row>
                  保证金余额
                  <span>1000</span>
                </van-row>
              </van-col>
            </van-row>
            <button class="btn">买入</button>
          </div>

          <div class="state">
            <div class="title">
              <h2>交易状态</h2>
              <span>
                <img src="@/static/icon/chakan.png" alt />
                查看全部
              </span>
            </div>
            <div class="list">
              <ul>
                <li>
                  <div>
                    <i></i>买入
                  </div>
                  <div>123131</div>
                  <div>待匹配</div>
                </li>
                <li>
                  <div>
                    <i></i>买入
                  </div>
                  <div>123131</div>
                  <div>待匹配</div>
                </li>
                <li>
                  <div>
                    <i></i>买入
                  </div>
                  <div>123131</div>
                  <div>待匹配</div>
                </li>
                <li>
                  <div>
                    <i></i>买入
                  </div>
                  <div>123131</div>
                  <div>待匹配</div>
                </li>
                <li>
                  <div>
                    <i></i>买入
                  </div>
                  <div>123131</div>
                  <div>待匹配</div>
                </li>
                <li>
                  <div>
                    <i></i>买入
                  </div>
                  <div>123131</div>
                  <div>待匹配</div>
                </li>
                <li>
                  <div>
                    <i></i>买入
                  </div>
                  <div>123131</div>
                  <div>待匹配</div>
                </li>
                <li>
                  <div>
                    <i></i>买入
                  </div>
                  <div>123131</div>
                  <div>待匹配</div>
                </li>
                <li>
                  <div>
                    <i></i>买入
                  </div>
                  <div>123131</div>
                  <div>待匹配</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="卖出">
        <div class="tabsBox">
          <div class="by sell">
            <van-row gutter="20">
              <van-col span="12">
                <van-row>卖出积分</van-row>
                <van-row>
                  <input type="text" placeholder="请输入卖出积分数量" />
                </van-row>
                <van-row>
                  单笔最大限额
                  <span>1000</span>积分
                </van-row>
              </van-col>
              <van-col span="12">
                <van-row>当前价格</van-row>
                <van-row>
                  <div>
                    <input type="text" value="1.00" />
                    <span>元</span>
                  </div>
                </van-row>
                <van-row></van-row>
              </van-col>
            </van-row>

            <van-row gutter="20">
              <van-col span="12">
                <van-row>可用积分</van-row>
                <van-row>
                  <input type="text" value="1543" readonly />
                </van-row>
                <van-row>
                  <!-- 当日剩余可买
                  <span>1000</span>积分-->
                </van-row>
              </van-col>
              <van-col span="12">
                <van-row>交易总额</van-row>
                <van-row>
                  <div>
                    <input type="text" value="1.00" />
                    <span>元</span>
                  </div>
                </van-row>
                <van-row>
                  <!-- 保证金余额
                  <span>1000</span>-->
                </van-row>
              </van-col>
            </van-row>
            <button class="btn" @tap="sellpop">卖出</button>
          </div>

          <div class="state">
            <div class="title">
              <h2>交易状态</h2>
              <span>
                <img src="@/static/icon/chakan.png" alt />
                查看全部
              </span>
            </div>
            <div class="list sell">
              <ul>
                <li>
                  <div>
                    <i></i>买入
                  </div>
                  <div>123131</div>
                  <div>待匹配</div>
                </li>
                <li>
                  <div>
                    <i></i>买入
                  </div>
                  <div>123131</div>
                  <div>待匹配</div>
                </li>
                <li>
                  <div>
                    <i></i>买入
                  </div>
                  <div>123131</div>
                  <div>待匹配</div>
                </li>
                <li>
                  <div>
                    <i></i>买入
                  </div>
                  <div>123131</div>
                  <div>待匹配</div>
                </li>
                <li>
                  <div>
                    <i></i>买入
                  </div>
                  <div>123131</div>
                  <div>待匹配</div>
                </li>
                <li>
                  <div>
                    <i></i>买入
                  </div>
                  <div>123131</div>
                  <div>待匹配</div>
                </li>
                <li>
                  <div>
                    <i></i>买入
                  </div>
                  <div>123131</div>
                  <div>待匹配</div>
                </li>
                <li>
                  <div>
                    <i></i>买入
                  </div>
                  <div>123131</div>
                  <div>待匹配</div>
                </li>
                <li>
                  <div>
                    <i></i>买入
                  </div>
                  <div>123131</div>
                  <div>待匹配</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <van-popup :show="sellShow" custom-class="sellpop" position="bottom" @close="sellShow=false">
      <div class="title">
        <span>输入短信验证码</span>
        <p>短信验证码发送至186 8038 1644</p>
      </div>
      <div class="vcode">
        <div style="opacity:0;height:0;">{{vcodeArr}}</div>
        <div>
          <span>{{vcodeArr[0] ? vcodeArr[0] : ''}}</span>
          <span>{{vcodeArr[1] ? vcodeArr[1] : ''}}</span>
          <span>{{vcodeArr[2] ? vcodeArr[2] : ''}}</span>
          <span>{{vcodeArr[3] ? vcodeArr[3] : ''}}</span>
          <span>{{vcodeArr[4] ? vcodeArr[4] : ''}}</span>
          <span>{{vcodeArr[5] ? vcodeArr[5] : ''}}</span>
        </div>
        <van-field
          :value="vcode"
          type="number"
          maxlength="6"
          :focus="true"
          class="vFidld"
          @change="onChange"
        />
        <p>36秒后再次获取</p>

        <button @tap="sell_unpaid">确认卖出</button>
      </div>
    </van-popup>
  </view>
</template>

<script>
import vuePwd from "@/components/vue-pwd/vue-pwd";
export default {
  data() {
    return {
      active: 0,
      tabsClass: 0,
      sellShow: false,
      vcodeArr: [],
      vcode: ""
    };
  },
  methods: {
    onChange(ev) {
      this.tabsClass = ev.detail.index;
    },
    sellpop() {
      this.sellShow = true;
    },
    onChange(e) {
      if (typeof e.detail == "string") {
        this.vcodeArr = e.detail;
        this.vcodeArr = this.vcodeArr.split("");
      } else {
        this.vcodeArr = [];
      }
    },
    sell_unpaid(){
      uni.navigateTo({
      	url:"../sell/unpaid"
      })
    }
  }
};
</script>

<style lang="less" scoped>
.loginNav {
  van-icon {
    margin-left: 10upx;
  }
}

.tabsBox {
  width: 100%;
  padding-bottom: 20upx;
  margin-top: 20upx;
  padding-top: 120upx;
  .by {
    padding: 40upx 20upx;
    box-sizing: border-box;
    input {
      float: left;
      box-sizing: border-box;
      border: 1.5upx solid #000;
      width: 100%;
      height: 72upx;
      padding: 10upx 20upx;
      color: #606060;
      font-size: 28upx;
      line-height: 52upx;
    }
    van-row {
      margin-top: 40upx;
      van-col {
        van-row:nth-child(1) {
          font-size: 24upx;
          line-height: 52upx;
        }
        van-row:nth-child(2) {
          div {
            position: relative;
            width: 100%;
            span {
              position: absolute;
              right: 15upx;
              top: 0;
              line-height: 72upx;
              font-size: 24upx;
              color: #606060;
            }
          }
        }
        van-row:nth-child(3) {
          color: #bebebe;
          font-size: 20upx;
          line-height: 40upx;
          span {
            color: #37a6ff;
          }
        }
      }
      van-col:nth-child(2) {
        van-row:nth-child(3) {
          text-align: right;
        }
      }
    }

    .btn {
      width: 100%;
      height: 88upx;
      line-height: 88upx;
      font-size: 32upx;
      color: #fff;
      border-radius: 0;
      margin-top: 40upx;
      background: rgba(60, 216, 183, 1);
      box-shadow: 0px 10upx 20upx 0px rgba(60, 216, 183, 0.3);
    }
  }

  .state {
    width: 100%;
    margin-top: 20upx;
    .title {
      width: 100%;
      border-bottom: 1upx solid #f6f6f6;
      padding: 0 32upx;
      line-height: 60upx;
      height: 60upx;
      display: inline-block;
      box-sizing: border-box;
      h2 {
        float: left;
        font-size: 28upx;
        color: #000;
      }
      span {
        float: right;
        font-size: 24upx;
        color: #787878;
        img {
          width: 22upx;
          height: 22upx;
          margin-right: 10upx;
          vertical-align: middle;
        }
      }
    }
    .list {
      width: 100%;
      display: inline-block;
      li {
        border-bottom: 1upx solid #f6f6f6;
        width: 100%;
        float: left;
        div {
          font-size: 26upx;
          color: #606060;
          line-height: 88upx;
          float: left;
          &:nth-child(1) {
            width: 33%;
            text-align: center;
            i {
              float: left;
              background: #3cd8b7;
              width: 6upx;
              height: 30upx;
              margin-top: 29upx;
            }
          }
          &:nth-child(2) {
            width: 33%;
            text-align: center;
          }
          &:nth-child(3) {
            text-align: right;
            width: 33%;
            color: #000;
            padding-right: 30upx;
            box-sizing: border-box;
          }
        }
      }
    }
  }

  .sell {
    .btn {
      background: rgba(255, 60, 78, 1);
      box-shadow: 0px 10upx 20upx 0px rgba(255, 60, 78, 0.3);
    }

    &.list li div:nth-child(1) {
      i {
        background: #ff3c4e;
      }
    }
  }
}

.sellpop {
  padding-bottom: 120upx;
  height: 600upx;
  .title {
    padding: 30upx;
    border-bottom: 1upx solid #eaeaea;
    span {
      font-size: 42upx;
      color: #000;
    }
    p {
      color: #9f9f9f;
      font-size: 24upx;
    }
  }

  .vcode {
    position: relative;
    padding: 0 30upx;
    div {
      display: flex;
      justify-content: space-between;
      span {
        border-bottom: 2upx solid #000;
        color: #000;
        width: 80upx;
        line-height: 100upx;
        height: 100upx;
        font-size: 32upx;
        text-align: center;
      }
    }
    .vFidld {
      position: absolute;
      width: 100%;
      height: 80upx;
      opacity: 0;
      background: #000;
      left: 0;
      top: 0;
      height: 80upx;
    }
    p {
      height: 80upx;
      line-height: 80upx;
      color: #9f9f9f;
      font-size: 24upx;
    }
    button {
      width: 100%;
      height: 88upx;
      line-height: 88upx;
      background: #fd444a;
      font-size: 36upx;
      color: #fff;
      margin-top: 40upx;
    }
  }
}
</style>
